<template>
  <div class="app-container">
    <!-- 按钮行 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" >新增</el-button >
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-refresh" size="mini" @click="getList()" >刷新</el-button >
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      v-loading="loading"
      :data="filterDataList()"
      @selection-change="handleSelectionChange"
      @row-dblclick="handleUpdate"
      :row-style="{ height: '32px' }"
      :cell-style="{ padding: '0px' }"
      border
      :height="tableHeight"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="编码" width="200" align="left" prop="code" />
      <el-table-column label="名称" width="160" align="left" prop="name" />
      <el-table-column label="参数值" width="380" align="left" prop="value"/>
      <el-table-column label="描述" width="260" align="left" prop="desc"/>
      <el-table-column label="操作" align="right" class-name="small-padding fixed-width" >
        <template slot="header">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" clearable/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" >修改</el-button >
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >删除</el-button >
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改对话框 -->
    <el-dialog :title="form.title" :visible.sync="form.open" width="600px" append-to-body>
      <el-form ref="form" :model="form.data" :rules="form.rules" label-width="80px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="编码" prop="code">
              <el-input v-model="form.data.code" :readonly="this.form.status==='update'" 
              :disabled="form.status === 'update'"
              placeholder="请输入编码" />
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.data.name" placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="参数值" prop="value">
              <el-input v-model="form.data.value" placeholder="请输入参数值" />
            </el-form-item>
            <el-form-item label="描述" prop="value">
              <el-input v-model="form.data.desc" placeholder="请输入描述" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getParam,saveParamArray } from "@/api/aitcommon/appCommon";

export default {
  name: "appparam",
  components: {},
  data() {
    return {
      // 表格高度
      tableHeight: 0,
      // 遮罩层
      loading: true,
      // 选中数组
      selection:[],
      // 查询条件
      search: "",
      // 模型数据
      model:{
        paramStr: "appconfig.system.sysParams",
        paramData:[],
      },
      // 表单参数
      form: {
        title:"系统参数",
        status:'add', //add 新增 update 修改
        data:{},
        // 表单校验
        rules: {
          code: [{ required: true, message: "编码不能为空", trigger: "blur" }],
          name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
          value: [{ required: true, message: "参数值不能为空", trigger: "blur" }],
        },
        // 是否显示弹出层
        open: false,
      },
    };
  },
  created() {
    // 刷新数据
    this.getList();
    
  },
  mounted() {
    this.$nextTick(() => {
      // window窗口大小变化后,页面table自适应高度,需要点击 刷新
      // window.innerHeight 浏览器窗口的可见高度，下面的 220 是除了table最大高度的剩余空间。
      let height = window.innerHeight - 220;
      this.tableHeight = height;
    });
  },
  methods: {
    getList() {
      this.loading = true;
      getParam(this.model.paramStr)
        .then((response) => {
          this.model.paramData=response.data;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    filterDataList() {
      const search = this.search||'';
      const lowerSearch = search.toLowerCase();
      return this.model.paramData.filter((data) => {
        if(data.code==='admin') return false;
        for (let key in data) {
          if (data.hasOwnProperty(key)) {
            const value = data[key];
            if(!value||!(typeof value === 'string')) continue;
            if (value.toLowerCase().includes(lowerSearch) ) {
              return true;
            }
          }
        }
        return false; // 没有任何字段匹配搜索内容，则过滤掉
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
    },
    // 表单重置
    reset() {
      this.form.data = {};
      this.form.open=false;//关闭dialog
      this.form.status='add';
      this.resetForm("form");
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.selection=selection;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.form.open = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      let data={};
      if(!row){
        // 这是按钮点击
        if(this.selection.length!==1){
          this.msgError('选择一条记录')
          return;
        }
        data=this.selection[0];
      }else{
        data=row;
      }
      //弹开form
      this.reset();
      this.form.data = {...data};
      this.form.open = true;
      this.form.status='update';
    },
    /** 表单提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return;
        saveParamArray(this.model.paramStr,'code',this.form.data).then(response => {
          this.msgSuccess("修改成功");
          this.reset();
          this.getList();
        });
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm(
        '是否确认删除中间库配置编号为"' + row.code + '"的数据项?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
      .then(()=>{
        return saveParamArray(this.model.paramStr,'code',row,true);
      })
      .then(() => {
        this.msgSuccess("删除成功");
      })
      .catch((error) => {
      }).finally(()=>{
        this.getList();
      });
    },
  },
};
</script>
